<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .font-bold{
        font-size: 14px;
        margin: 20px 0;
    }
    .gray-bg{
        background: #fff;
    }
    .fixed-table-body,.fixed-table-pagination{
        padding: 0 40px;
    }
    .study{
        padding: 0 40px;
        width: 100%;
        margin-bottom: 20px;
        font-weight:bold;
    }
</style>
<body class="gray-bg">
<div class="row">
    <div class="col-sm-3">
        <div class="wrapper wrapper-content project-manager">

            <h3>用户名：<label th:text="${user.username}"></label>
                <span type="hidden" th:if='${user.userType == 0}'>（学生）</span>
                <span type="hidden" th:if='${user.userType == 1}'>（老师）</span>
            </h3>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    用户真实姓名：
                        <label th:if="${user.name == null}"> - </label>
                        <label th:if="${user.name != null}"> <label th:text="${user.name}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    手机号：
                        <label th:if="${user.mobile == null}"> - </label>
                        <label th:if="${user.mobile != null}"> <label th:text="${user.mobile}"></label> </label>
                </span>
            </p>

            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    身份证号：
                        <label th:if="${user.idNumber == null}"> - </label>
                        <label th:if="${user.idNumber != null}"> <label th:text="${user.idNumber}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    邮箱：<label th:if="${user.email != null}"> <label th:text="${user.email}"></label> </label>
                        <label th:if="${user.email == null}"> - </label>
                </span>
            </p>
            <p class=" font-bold">

                <span><i class="fa fa-circle text-success"></i>
                    QQ：<label th:if="${user.QQ == null}"> - </label>
                        <label th:if="${user.QQ != null}"> <label th:text="${user.QQ}"></label> </label>
                </span>

            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    状态：<label th:if="${user.status==0}">禁用</label>
                    <label th:if="${user.status==1}">正常</label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    省份： <label th:if="${user.province == null}"> - </label>
                          <label th:if="${user.province != null}"> <label th:text="${user.province}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    所在城市：
                            <label th:if="${user.city == null}"> - </label>
                            <label th:if="${user.city != null}"> <label th:text="${user.city}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    所在地区：
                            <label th:if="${user.district == null}"> - </label>
                            <label th:if="${user.district != null}"> <label th:text="${user.district}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    详细地址：
                            <label th:if="${user.liveAddress == null}"> - </label>
                            <label th:if="${user.liveAddress != null}"> <label th:text="${user.liveAddress}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    用户头像：

                            <label th:if="${user.headPortrait == null}"> - </label>
                            <label th:if="${user.headPortrait != null}"> <img style="width: 80px;height: 80px" th:src="${user.headPortrait}" /> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    学习、工作经历：
                            <label th:if="${user.experience == null}"> - </label>
                            <label th:if="${user.experience != null}"> <label th:text="${user.experience}"></label> </label>
                </span>
            </p>

        </div>
    </div>

    <input type="hidden" id="userType" th:value='${user.userType}'>

    <div class="col-sm-3">
        <div class="wrapper wrapper-content animated fadeInUp">
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    性别：<label th:if="${user.sex==0}">未知</label>
                    <label th:if="${user.sex==1}">男</label>
                    <label th:if="${user.sex==2}">女</label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    审核状态：<label th:if="${user.state==0}">已完善（审核中）</label>
                    <label th:if="${user.state==1}">通过</label>
                    <label th:if="${user.state==2}">未通过</label>
                    <label th:if="${user.state==3}">未完善</label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                        出生年月：
                                <label th:if="${user.dateOfBirth == null}"> - </label>
                                <label th:if="${user.dateOfBirth != null}"> <label th:text="${user.dateOfBirth} eq null ? '' : ${#dates.format(user.dateOfBirth, 'yyyy-MM-dd HH:mm:ss')}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    民族：
                        <label th:if="${user.nation == null}"> - </label>
                        <label th:if="${user.nation != null}"> <label th:text="${user.nation}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    学历：
                        <label th:if="${user.education == null}"> - </label>
                        <label th:if="${user.education != null}">
                            <label th:if="${user.education=='1'}">本科</label>
                            <label th:if="${user.education=='2'}">专科</label>
                        </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    专业：
                        <label th:if="${user.major == null}"> - </label>
                        <label th:if="${user.major != null}"> <label th:text="${user.major}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    政治面貌：
                            <label th:if="${user.politicalAffiliation == null}"> - </label>
                            <label th:if="${user.politicalAffiliation != null}"> <label th:text="${user.politicalAffiliation}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                <span><i class="fa fa-circle text-success"></i>
                    职务职称：
                            <label th:if="${user.officialCapacity == null}"> - </label>
                            <label th:if="${user.officialCapacity != null}"> <label th:text="${user.officialCapacity}"></label> </label>
                </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        单位名称：
                                <label th:if="${user.school == null}"> - </label>
                                <label th:if="${user.school != null}"> <label th:text="${user.school}"></label> </label>
                    </span>
            </p>
        </div>
    </div>

    <div class="col-sm-3">
        <!--学生-->
        <div class="student">

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        入学时间：
                                <label th:if="${user.timeOfEnrollment == null}"> - </label>
                                <label th:if="${user.timeOfEnrollment != null}"> <label th:text="${user.timeOfEnrollment}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        学校名称：
                                <label th:if="${user.school == null}"> - </label>
                                <label th:if="${user.school != null}"> <label th:text="${user.school}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        学校所在地：
                                <label th:if="${user.schoolAddress == null}"> - </label>
                                <label th:if="${user.schoolAddress != null}"> <label th:text="${user.schoolAddress}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        学校详细地址：
                                <label th:if="${user.schoolIndetailAddress == null}"> - </label>
                                <label th:if="${user.schoolIndetailAddress != null}"> <label th:text="${user.schoolIndetailAddress}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                         学校层次：
                                <label th:if="${user.schoolLevel == null}"> - </label>
                                <label th:if="${user.schoolLevel != null}">
                                    <label th:if="${user.schoolLevel==1}">本科</label>
                                    <label th:if="${user.schoolLevel==2}">专科</label>
                                </label>
                    </span>



            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        技能等级证书：
                                <label th:if="${user.ratingCertificate == null}"> - </label>
                                <label th:if="${user.ratingCertificate != null}"> <label th:text="${user.ratingCertificate}"></label> </label>
                    </span>
            </p>


        </div>

        <!--老师 -->
        <div class="teacher">
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        单位所在地：
                                <label th:if="${user.schoolAddress == null}"> - </label>
                                <label th:if="${user.schoolAddress != null}"> <label th:text="${user.schoolAddress}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        单位详细地址：
                                <label th:if="${user.schoolIndetailAddress == null}"> - </label>
                                <label th:if="${user.schoolIndetailAddress != null}"> <label th:text="${user.schoolIndetailAddress}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        所在系部：
                                <label th:if="${user.department == null}"> - </label>
                                <label th:if="${user.department != null}"> <label th:text="${user.department}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        所在专业：
                                <label th:if="${user.major == null}"> - </label>
                                <label th:if="${user.major != null}"> <label th:text="${user.major}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        职称信息：
                                <label th:if="${user.officialCapacityName == null}"> - </label>
                                <label th:if="${user.officialCapacityName != null}"> <label th:text="${user.officialCapacityName}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        照片信息：
                                <label th:if="${user.img == null}"> - </label>
                                <label th:if="${user.img != null}"> <img width="80" height="80" th:src="${user.img}" alt=""> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        收件地址：
                                <label th:if="${user.shippingAddress == null}"> - </label>
                                <label th:if="${user.shippingAddress != null}"> <label th:text="${user.shippingAddress}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        收件详细地址：
                                    <label th:if="${user.shippingIndetailAddress == null}"> - </label>
                                    <label th:if="${user.shippingIndetailAddress != null}"> <label th:text="${user.shippingIndetailAddress}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        税号： <label th:if="${user.dutyParagraph == null}"> - </label>
                              <label th:if="${user.dutyParagraph != null}"> <label th:text="${user.dutyParagraph}"></label> </label>
                    </span>
            </p>

            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        卡号：
                                <label th:if="${user.cardNumber == null}"> - </label>
                                <label th:if="${user.cardNumber != null}"> <label th:text="${user.cardNumber}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        帐户名：
                                <label th:if="${user.accountName == null}"> - </label>
                                <label th:if="${user.accountName != null}"> <label th:text="${user.accountName}"></label> </label>
                    </span>
            </p>
            <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        所属银行：
                                <label th:if="${user.bank == ''}"> - </label>
                                <label th:if="${user.bank != ''}"> <label th:text="${user.bank}"></label> </label>
                    </span>
            </p>


        </div>
        <!--学习总时长 -->
       <div>
           <p class=" font-bold">
                    <span><i class="fa fa-circle text-success"></i>
                        学习总时长：
                       <label id="studyTime"></label> </label>
                    </span>
           </p>
       </div>
    </div>
    <input type="hidden" th:value="${user.id}" id="userId">
    <p class="col-sm-3 study">学习信息</p>
    <table id="exampleTable" data-mobile-responsive="true" style="padding: 0 20px">
    </table>
</div>
<div th:include="include::footer"></div>
<!--<script src="//s.xlongwei.com/res/js/My97DatePicker/WdatePicker.js"></script>-->
<script>

    var type = $("#userType").val();
       if( type == 0 ){
           $(".teacher").hide();
       }else if( type == 1 ) {
           $(".student").hide();
       }
    var prefix = "/sys/user";
    $(function () {
        load();
    });
    var loadings = layer.load();
    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method: 'get', // 服务器数据的请求方式 get or post
                    url: prefix + "/userRecord", // 服务器数据的加载地址
                    //	showRefresh : true,
                    //	showToggle : true,
                    //	showColumns : true,
                    iconSize: 'outline',
                    toolbar: '#exampleToolbar',
                    striped: true, // 设置为true会有隔行变色效果
                    dataType: "json", // 服务器返回的数据类型
                    pagination: true, // 设置为true会在底部显示分页条
                    singleSelect: false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize: 10, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    //search : true, // 是否显示搜索框
                    showColumns: false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    queryParamsType: "",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    queryParams: function (params) {
                        return {
                            //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            pageNumber: params.pageNumber,
                            pageSize: params.pageSize,
                            id:$('#userId').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    responseHandler: function (res) {
                        layer.close(loadings);
                        console.log(res);
                        $('#studyTime').html(res.data.timeAll)
                        return {
                            "total": res.data.pageList.total,//总数
                            "rows": res.data.pageList.records   //数据
                        };
                    },
                    columns: [
                        // {
                        //     checkbox: true
                        // },
                        {
                            field: 'resourcesName',
                            title: '课程名称',
                            width: '400px'
                        },
                        {
                            field: 'time',
                            title: '学习时长',
                            width: '400px'
                        },
                        {
                            field: 'createrDate',
                            title: '学习时间',
                            width: '400px'
                        },
                        {
                            title: '操作',
                            field: 'id',
                            align: 'center',
                            visible:false
                        }]
                });
    }

    function reLoad() {
        $('#exampleTable').bootstrapTable('refresh');
    }


</script>
</body>
</html>
